<template>
  <view class="comment-item">
    <view class="user-info">
      <image :src="comment.user.avatar" class="avatar" />
      <text class="username">{{ comment.user.name }}</text>
      <text class="time">{{ comment.time }}</text>
      <text class="likes" @click="toggleLike">
        <span :class="{ liked: comment.hasLiked }">
          {{ comment.hasLiked ? '❤️' : '🖤' }} <!-- 根据点赞状态显示不同的心 -->
        </span>
        {{ comment.likes }}
      </text>
    </view>
    <text class="content">{{ comment.content }}</text>
    <view class="reply-button" @click="$emit('reply')">回复</view>

    <!-- 查看回复按钮 -->
    <view v-if="comment.replies.length > 0" class="reply-toggle" @click="toggleReplies">
      <text>{{ showReplies ? '收起回复' : '查看回复' }} ({{ comment.replies.length }})</text>
    </view>

    <!-- 回复部分 -->
    <view v-if="showReplies" class="replies-border">
      <view class="replies">
        <view v-for="(reply, replyIndex) in comment.replies" :key="replyIndex" class="reply-item">
          <view class="user-info">
            <image :src="reply.user.avatar" class="avatar" />
            <text class="username">{{ reply.user.name }}</text>
            <text class="time">{{ reply.time }}</text>
            <text class="likes" @click="toggleReplyLike(reply)">
              <span :class="{ liked: reply.hasLiked }">
                {{ reply.hasLiked ? '❤️' : '🖤' }} <!-- 根据点赞状态显示不同的心 -->
              </span>
              {{ reply.likes }}
            </text>
          </view>
          <text class="reply-content">{{ reply.content }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    comment: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      showReplies: false, // 控制回复的显示与隐藏
    };
  },
  methods: {
    toggleReplies() {
      this.showReplies = !this.showReplies; // 切换回复显示状态
    },
    toggleLike() {
      // 切换点赞状态
      if (this.comment.hasLiked) {
        this.comment.likes--; // 减少点赞数
        this.comment.hasLiked = false; // 设置为未点赞
      } else {
        this.comment.likes++; // 增加点赞数
        this.comment.hasLiked = true; // 设置为已点赞
      }
    },
    toggleReplyLike(reply) {
      // 切换回复的点赞状态
      if (reply.hasLiked) {
        reply.likes--; // 减少点赞数
        reply.hasLiked = false; // 设置为未点赞
      } else {
        reply.likes++; // 增加点赞数
        reply.hasLiked = true; // 设置为已点赞
      }
    },
  },
};
</script>

<style scoped>
.comment-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
  background-color: #fff; /* 评论背景 */
  border-radius: 5px; /* 圆角 */
  margin-bottom: 5px; /* 评论间距 */
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.username {
  font-weight: bold;
  color: #333;
}

.time {
  font-size: 12px;
  color: #999;
  margin-left: 10px;
}

.likes {
  margin-left: auto;
  font-size: 30rpx;
  color: #007AFF; /* 点赞颜色 */
  cursor: pointer; /* 鼠标悬停时显示为可点击 */
}

.likes .liked {
  color: #d32f2f; /* 点赞时的颜色 */
}

.content {
  margin-top: 5px;
  color: #555; /* 评论文字颜色 */
  white-space: pre-wrap; /* 保持换行 */
  word-wrap: break-word; /* 防止长单词溢出 */
}

.reply-button {
  color: #007AFF; /* 回复按钮颜色 */
  margin-top: 5px;
  width: 100rpx;
  cursor: pointer;
}

/* 回复显示控制 */
.reply-toggle {
  color: #007AFF; /* 回复按钮颜色 */
  margin-top: 5px;
  cursor: pointer;
  font-size: 12px; /* 小一点的字体 */
}

.replies-border {
  border: 1px solid #ccc; /* 边框颜色 */
  border-radius: 5px; /* 圆角 */
  padding: 10px; /* 内边距 */
  margin-top: 5px; /* 上边距 */
}

.replies {
  padding-left: 10px; /* 回复缩进 */
}

.reply-item {
  font-size: 12px; /* 小一点的字体 */
  margin-bottom: 5px; /* 回复间距 */
}

.reply-content {
  margin-top: 5px;
  color: #555; /* 回复文字颜色 */
  white-space: pre-wrap; /* 保持换行 */
  word-wrap: break-word; /* 防止长单词溢出 */
}
</style>
